<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>日志信息列表</title>
<link href="layui/css/layui.css" rel="stylesheet"
	type="text/css" />
<script src="layui/layui.js"></script>
</head>
<body>
	<!-- 表单搜素 -->
	<div class="layui-form-item">
		<div class="layui-inline">
			<label class="layui-form-label">卡号</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" name="cardNo" id="cardNo" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<input type="button" class="layui-btn" id="souBtn" value="搜索" />
	</div>



	<!-- 表格容器 -->
	<table id="demo" lay-filter="test"></table>


	
	<!-- 表格的行内工具条 -->
	<script type="text/html" id="barDemo2">
  		<a class="layui-btn layui-btn-xs" lay-event="">刷卡退出</a>
	</script>

<!-- 添加的弹窗 -->
	<div id="tianjiachuang" style="display: none">
		<form class="layui-form" onsubmit="return false" id="tianjiaForm"
			lay-filter="tianjiaForm">
			<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
			<div class="layui-form-item">
				<label class="layui-form-label">阅览室名称</label>
				<div class="layui-input-inline">
					<input type="text" name="rname" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-inline">
					<input type="text" name="remark" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
			<label class="layui-form-label"></label>
				<div class="layui-input-inline">
					<button class="layui-btn" lay-submit lay-filter="tianjiabtn">添加提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>

<!-- 修改的弹窗 -->
	<div id="xiugaichuang" style="display: none">
		<form class="layui-form" onsubmit="return false" id="xiugaiForm"
			lay-filter="xiugaiForm">
			<div class="layui-form-item">
				<label class="layui-form-label">阅览室名称</label>
				<div class="layui-input-inline">
					<input type="text" name="rname" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">备注</label>
				<div class="layui-input-inline">
					<input type="text" name="remark" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
			<label class="layui-form-label"></label>
				<div class="layui-input-inline">
					<button class="layui-btn" lay-submit lay-filter="xiugaibtn">修改提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
			<!--  修改的表单中，需要放一个 隐藏域，用来储存id-->
			<input type="hidden" name="logid"/>
			
		</form>
	</div>


	<!-- 脚本代码部分 -->
	<script>
		layui.use([ 'form', 'layer', 'table' ], function() {
			var form = layui.form;
			var table = layui.table;
			var layer = layui.layer;
			var $ = layui.$;

			//渲染表格
			table.render({
				elem : '#demo', //指定原始表格元素选择器（推荐id选择器）
				page : true,//开启分页
				url : 'getDailyLogList',
				
				cols : [ [ //标题栏
				{
					checkbox : true
				}, {
					field : 'logid',
					title : 'id',
					sort: true,
					width : 80
				}, {
					field : 'cardNo',
					title : '卡号',
					width : 120
				}, {
					field : 'readRoomId',
					title : '资源编号',
					width : 100
				}, {
					field : 'inTime',
					title : '进入时间',
					templet:'<div>{{ layui.util.toDateString(d.inTime, "yyyy-MM-dd HH:mm:ss") }}</div>',
					width : 180
				}, {
					field : 'outTime',
					title : '退出时间',
					//templet:'<div>{{ layui.util.toDateString(d.outTime, "yyyy-MM-dd HH:mm:ss") }}</div>',
					width : 180
				}, {
					field : 'status',
					title : '状态',
					width : 100
				}, {
					toolbar : '#barDemo2',
					title : '操作'
				} ] ]
			});
			//渲染表格--end

			//搜索按钮的单击事件
			$("#souBtn").click(function() {
				//判断 区间的数据合理性
				if($("#min").val()>$("#max").val()){
					alert("最高值不得高于起始值");
					return ;  //结束函数，下面的重载不会再执行
				}
				
				
				//表格重载
				table.reload('demo', {
					where : {
						cardNo : $("#cardNo").val(),
						min : $("#min").val(),
						max : $("#max").val()
					}
				});
			});
			//搜索按钮的单击事件-end

			//监听头部工具条
			table.on('toolbar(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var layEvent = obj.event; //获得 lay-event 对应的值
				if (layEvent === 'add') { //添加
					//弹窗
					layer.open({
						type : 1,
						area : [ '800px', '600px' ],
						content : $('#tianjiachuang')
					});
				}
			});
			//监听头部工具条--end

			//监听行内工具条
			table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值
				var tr = obj.tr; //获得当前行 tr 的DOM对象

				
					layer.confirm('真的退出吗？', function(index) {
						//向服务端发送删除指令
						var url = "updateLog";
						$.post(url,{rid:data.logid},function(res){
							layer.alert(res.msg,function(){
								layer.closeAll(); //关闭所有的窗口
								table.reload('demo', {}); //表格重载
							});
						},"json");
					});
				
			});
			//监听行内工具条---end

			//添加提交的 监听
			form.on('submit(tianjiabtn)', function(data) {
				$.post("addLog",data.field,function(res){
					if(res.code!=1){
						layer.alert("添加成功",function(){
							layer.closeAll(); //关闭所有的窗口
							table.reload('demo', {}); //表格重载
						});
					}
				},"json");
				
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
			//添加提交的 监听---end

			//修改提交的监听
		form.on('submit(xiugaibtn)', function(data) {
				var url = "updateLog";
				$.post(url,data.field,function(res){
					layer.alert(res.msg,function(){
						layer.closeAll(); //关闭所有的窗口
						table.reload('demo', {}); //表格重载
					});
				},"json");
				
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			}); 
			//修改提交的监听--end

		});
	</script>








</body>
</html>